import {Col, Input, InputNumber, message, Row, Select, Space} from "antd";
import React from "react";
import {DeleteOutlined, PlusCircleFilled} from '@ant-design/icons';

export default class extends React.Component {

  state = {
    dataSource: [],
    inputValue:''
  }

  constructor(props) {
    super(props);

    this.state.dataSource = props.dataSource;

  }


  columns = []
  inputUUID = this.guid()

  guid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      var r = Math.random() * 16 | 0,
        v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  }

  add = () => {
    let {dataSource} = this.state;
    dataSource.push({})

    this.setState({dataSource})
  }
  remove = (i) => {
    let {dataSource} = this.state;

    dataSource.splice(i, 1)

    this.setState({dataSource})
  }

  edit = (key, value, i) => {
    let {dataSource} = this.state;
    dataSource[i][key] = value;
    this.setState({dataSource})
  }

  copy = (data) =>{
    let element = document.getElementById(this.inputUUID);
    element.value = JSON.stringify(data)
    element.select();
    let successful = document.execCommand('Copy');
    if(successful){
      message.success('复制成功！')
    }else{
      message.warning('复制失败！')
    }
  }
  //添加或者替换 没有key的就添加 添加在最后面一个 有的就替换value
  replace = (key, value) => {
    let i = -1;
    //先查找key是否存在 按照最左面的一个进行匹配
    let {dataSource} = this.state;
    //判断导入全部还是部分 全部就是全部
    if (!dataSource || dataSource.length === 0){
      dataSource = value
    }else {
      for (let j = 0; j < dataSource.length; j++) {
        let data = dataSource[j];
        if (data.key && key){
          if (data.key === key){
            i = j;
          }
        }
      }
      if (i !== -1){
        dataSource[i] = value
      }else {
        dataSource.push(value)
      }
    }
    this.setState({dataSource})
  }

  render() {
    const {columns} = this.props;
    const {dataSource,inputValue} = this.state
    return <div>
      <textarea id={this.inputUUID} style={{width:0,height:0,opacity:0}}/>
      {/*<Row gutter={24}>*/}
        {/*<Col span={20}>*/}
        {/*  <Input addonBefore={"导入框"} placeholder={"回车键快速导入,只有数据不存在的时候，才能导入全部"} allowClear={true} value={inputValue} onPressEnter={(e)=>{*/}
        {/*    let value = e.target.value*/}
        {/*    let parse = JSON.parse(value);*/}
        {/*    this.replace(parse.key,parse)*/}
        {/*    this.setState({inputValue:''})*/}
        {/*  }} onChange={(e)=>{*/}
        {/*    let value = e.target.value*/}
        {/*    this.setState({inputValue:value})*/}
        {/*  }}/>*/}
        {/*</Col>*/}
      {/*  <Col span={2}>*/}
      {/*    <a onClick={()=>{*/}
      {/*      this.copy(dataSource)*/}
      {/*    }}>复制全部</a>*/}
      {/*  </Col>*/}
      {/*  <Col span={2}>*/}
      {/*    <a onClick={()=>{*/}
      {/*      this.setState({dataSource: []})*/}
      {/*    }}>清除全部</a>*/}
      {/*  </Col>*/}
      {/*</Row>*/}

      <table className="q-table">
        <thead>
        <tr>
          {columns.map(c => <th key={c.dataIndex}>{c.title}</th>)}
          <th>-</th>
        </tr>
        </thead>
        <tbody>
        {dataSource.map((p, i) => <tr key={i}>
          {columns.map(c => <td key={c.dataIndex}>
            {c.dataType == 'Input' && <Input size="small"
                                             value={p[c.dataIndex]}
                                             onChange={e => {
                                               this.edit(c.dataIndex, e.target.value, i)
                                             }}/>}

            {c.dataType == 'InputNumber' && <InputNumber size="small"
                                                         value={p[c.dataIndex]}
                                                         onChange={v => {
                                                           this.edit(c.dataIndex, v, i)
                                                         }}/>}


            {c.dataType == 'Select' && <Select value={p[c.dataIndex]} size="small"
                                               onChange={v => this.edit(c.dataIndex, v, i)}
                                               style={{minWidth: 100}}
            >

              {Object.keys(c.valueEnum).map(k => <Select.Option key={k} value={k}>{c.valueEnum[k]}</Select.Option>)}
            </Select>}
          </td>)}
          <td>
            <DeleteOutlined onClick={() => this.remove(i)}></DeleteOutlined>
          </td>
          {/*<td>*/}
          {/*  <a onClick={()=>{*/}
          {/*    let data = dataSource[i]*/}
          {/*    this.copy(data)*/}
          {/*  }}>复制</a>*/}
          {/*</td>*/}
        </tr>)}

        {dataSource.length == 0 && <tr>
          <td height={50} colSpan={columns.length + 1}>暂无数据</td>
        </tr>}

        </tbody>
      </table>

      <div style={{marginTop: 16, marginBottom: 16}}>
        <Space>
          <PlusCircleFilled style={{color: '#1890ff'}}/><a onClick={this.add}>添加</a>
        </Space>
      </div>
    </div>

  }
}
